<template>
	<view>
		
		<view class="venueForm">
			<view>
				<view style="margin-bottom: 20rpx; font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;"><text class="required">*</text>请上传照片</view>
			</view>
			<view style="display: flex;">
				<view style="width: 200rpx;">
					<u-upload name="coachImg" :fileList="coachImgList" @afterRead="onUpload($event, 'coachImg')"
						@delete="onDelete($event, 'coachImg')" :maxCount="1" width="120" height="120">
						<view class="upload">
							<view class="picture" style="width: 120rpx;height: 120rpx;">
								<image src="../../../../static/mine/user-circle.png"  style="width: 120rpx;height: 120rpx;"></image>
							</view>
						</view>
					</u-upload>
				</view>
				<view style="font-size: 31rpx;color:#888888;line-height: 50rpx; display: flex;padding-left: 30rpx;align-items: center;">请上传您的照片，建议证件照片尤为最佳</view>
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view  class="venueForm">
			<view>
				<view style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;"><text class="required">*</text>请上传身份证</view>
				<view style="color: #888888;font-size: 26rpx;line-height: 60rpx;">请拍摄上传您的中国第二代居民身份证原件</view>
			</view>
			<u-row gutter="10" >
				<u-col span="6">
					<view>
						<u-upload name="idFront" :fileList="idFrontList" @afterRead="onUpload($event, 'idFront')"
							@delete="onDelete($event, 'idFront')" :maxCount="1" width="300" height="200">
							<view class="upload">
								<view class="picture" style="width: 300rpx;height: 200rpx;">
									<image src="../../../../static/image/ex1.png"  style="width: 100%;height: 400rpx;" mode="widthFix"></image>
								</view>
							</view>
						</u-upload>
						<view class="text" style="font-size: 31rpx;color:#888888;text-align: center;line-height: 50rpx; ">上传身份证正面照</view>
					</view>
				</u-col>
				<u-col span="6">
					<view>
						<u-upload name="idBack" :fileList="idBackList" @afterRead="onUpload($event, 'idBack')"
							@delete="onDelete($event, 'idBack')" :maxCount="1"  width="300" height="200">
							<view class="upload">
								<view class="picture" style="width: 300rpx;height: 200rpx;">
									<image src="../../../../static/image/ex2.png"  style="width: 100%;height: 400rpx;" mode="widthFix"></image>
								</view>
							</view>
						</u-upload>
						<view class="text" style="font-size: 31rpx;color:#888888;text-align: center;line-height: 50rpx;">上传身份证反面照</view>
					</view>
				</u-col>
			</u-row>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>真实姓名</view>
					<input class="fvalue" placeholder="输入真实姓名" v-model="coachForm.coachName" />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>出生日期</view>
					<view  class="fvalue"  @click="birthday.show = true" >{{ coachForm.coachBirthday || '选择出生日期' }}</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row"  @click="pickerLocal.showLocal = true" >
					<view class="ftitle"><text class="required">*</text>所属区域</view>
					<view class="fvalue" >{{  (pickerLocal.local === '' ? '选择省/市/区' : pickerLocal.local) }}</view>
			
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>手机号码</view>
					<input class="fvalue" placeholder="输入手机号码"  v-model="coachForm.coachPhone"  />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>验证码</view>
					<input class="fvalue" placeholder="输入短信验证码"  v-model="coachForm.code"  />
					<view style="width: 100px;text-align: center;font-size: 32rpx;color: #f77d15;" @click="getCode">{{ smsData.getCodeText }}</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>登录账号</view>
					<input class="fvalue" placeholder="输入登录账号"  v-model="coachForm.account"  />
				</view>
			</view>
			<view class="height30"></view>
			<view >
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>登录密码</view>
					<input class="fvalue"  v-model="coachForm.password" type="password" placeholder="输入登录密码"  />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;"><text class="required">*</text>生涯履历</view>
				<view style="color: #888888;font-size: 26rpx;line-height: 60rpx;">请完善您的生涯履历让更多人看到且关注您</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row" style="display: block;">
					<view class="ftitle"><text class="required">*</text>专业标签</view>
					<view style="padding: 0rpx 20rpx;">
						<view class="multiple">
							<view :class="{active: coachTagsChooseList.indexOf(item.dictKey) >= 0}" v-for="item in coachTagsList"
								:key="item.dictKey" @click="onChoosePlan(item)">
								{{item.dictValue}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>从业时间</view>
					<view  class="fvalue"  @click="serviceYears.show = true" >{{ coachForm.serviceYears || '选择从业时间' }}</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<textarea class="fvalue" style="height: 150rpx;padding:10rpx;" placeholder="输入您的个人简介" v-model="coachForm.coachIntro"></textarea>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<textarea class="fvalue" style="height: 150rpx;padding:10rpx;" placeholder="输入您的从教经验(非必填)" v-model="coachForm.experienceFromTeaching"></textarea>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<textarea class="fvalue" style="height: 150rpx;padding:10rpx;" placeholder="输入您的教学成果(非必填)" v-model="coachForm.teachingOutcomes"></textarea>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<textarea class="fvalue" style="height: 150rpx;padding:10rpx;" placeholder="输入您的所获得的荣誉(非必填)" v-model="coachForm.honors"></textarea>
				</view>
			</view>
			
			<view class="height30"></view>
			<view>
				<button class="submitBtn" @click="formSubmitBtn">提交申请</button>
			</view>
			
		</view>
		
		
		
		
		<!-- 生日 -->
		<u-datetime-picker
				:show="birthday.show"
				v-model="birthday.value"
				mode="date"
				@confirm="birthdayConfirm"
				@cancel = "birthday.show = false"
				:minDate="60"
		></u-datetime-picker>
		
		<!-- 从业 -->
		<u-datetime-picker
				:show="serviceYears.show"
				v-model="serviceYears.value"
				mode="date"
				@confirm="serviceYearsConfirm"
				@cancel = "serviceYears.show = false"
				:minDate="60"
		></u-datetime-picker>
		
		<u-picker
		     @cancel="pickerLocal.showLocal = false"
		     @close="pickerLocal.showLocal = false"
		     :show="pickerLocal.showLocal"
		     :columns="pickerLocal.addressColumns"
		     @confirm="localConfirm"
		     title="请选择所属区域"
		     keyName="name"
		     itemHeight="80"
		     closeOnClickOverlay
		     ref="uPicker"
		     @change="changeHandler"
		     :defaultIndex="pickerLocal.defaultAddress"
		     immediateChange
		   ></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idFrontList: [],
				idBackList: [],
				coachImgList: [],
				//生日
				birthday:{
					show: false,
					value: '',
				},
				serviceYears: {
					show: false,
					value: '',
				},
				//场馆主注册申请表单
				coachForm: {
					//教练员头像
					coachImg: '',
					//教练员名称
					coachName: '',
					//出生日期
					coachBirthday: '',
					//身份证正面
					idFrontImg: '',
					//身份证反面
					idReverseImg: '',
					//简介
					coachIntro: '',
					//专业专长
					coachTags: '',
					//联系电话
					coachPhone: '',
					//从业时间
					serviceYears: '',
					//所属机构
					orgId: '',
					//登录账号
					account: '',
					//登录密码
					password: '',
					//短信验证码
					code: '',
					//从教经验
					experienceFromTeaching: '',
					//教学成果
					teachingOutcomes: '',
					//所获荣誉
					honors: ''
				},
				smsData: {
					getCodeText: '获取',
					getCodeBtnDisabled: false
				},
				pickerLocal:{
					//区域
					local: '',
					//展示弹出层
					showLocal: false,
					//数据数组
					addressColumns: [],
					//默认选中
					defaultAddress: [],
					//原始数据
					addressData: []
				},
				//教练员专业专长
				coachTagsList: [],
				//已选专长
				coachTagsChooseList: []
			}
		},
		onLoad() {
			this.coachTagsDict();
			this.fetchAddressList();
		},
		methods: {
			fetchAddressList() {
				this.$request({
					url: '/blade-client-business/app/organization/list',
					data: {}
				}).then(res => {
					if (res?.code === 200) {
						const {
							data
						} = res;
						var addressData = data[0];
						this.pickerLocal.addressData = [addressData];
						// this.pickerLocal.local = addressData.deptName+"-"+addressData.children[0].deptName+"-"+addressData.children[0].children[0].deptName;
						this.addressPickData();
					}
				})
			},
			addressPickData(){
				//省的数组
				const provinceData = this.pickerLocal.addressData.map(e => {
					return { name: e.deptName, code: e.id }//这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
				})
				//市的数组
				const cityData = this.pickerLocal.addressData.map(e => {
					const arr = []
					arr.push(
					  e.children.map(c => {
						return { name: c.deptName, code: c.id }
						  
					  })
					)
					return arr
				})
				console.log("cityData",cityData);
				//区的数组
				const areaData = this.pickerLocal.addressData.map(e => {
					const arr = []
					arr.push(
					  e.children.map(c =>
						c.children.map(d => {
						  return { name: d.deptName, code: d.id }
						})
					  )
					)
					return arr
				})
				console.log("areaData",areaData);
				const arr = [provinceData, cityData[0][0], areaData[0][0][0]]
				this.pickerLocal.addressColumns = arr    //将得到的3个数组 的第一个市的所有数据赋值 作为初始数据
				 
			},
			changeHandler(e) {
				//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身
				const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e
			   //如果改变的是第一列
				if (columnIndex === 0) {
				  const children1 = this.pickerLocal.addressData[index].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(1, children1)
				//更换 第二列数据
				  const children2 = this.pickerLocal.addressData[index].children[indexs[1]].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(2, children2)
				//更换 第三列数据
				}
				if (columnIndex === 1) {
					//如果改变的是第二列
				  const children3 = this.pickerLocal.addressData[indexs[0]].children[indexs[1]].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(2, children3)
					//更换 第三列数据
				}
			},
			localConfirm(e) {
				//显而易见 不多赘述
				this.pickerLocal.local = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`
				// this.pickerLocal.localCode = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`
				
				this.coachForm.orgId = `${e.value[0].code},${e.value[1].code},${e.value[2].code}`;
				this.pickerLocal.showLocal = false
			},
			//教练员专业字典
			coachTagsDict(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: '/blade-client-business/app/dict/getDictList',
						type: 'GET',
						data: {'code': 'speciality_type'}
					}).then(res => {
						this.coachTagsList = res.data;
						resolve(res.data);
					}).catch(err =>{
						reject(err); 
					})
				})
			},
			// 选择专业标签
			onChoosePlan(record) {
				const index = this.coachTagsChooseList.findIndex(item => item === record.dictKey);
				if (index >= 0) {
					this.coachTagsChooseList.splice(index, 1);
				} else {
					this.coachTagsChooseList.push(record.dictKey);
				}
			},
			// 日历确认
			birthdayConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				var coachBirthday = timeFormat(e.value, 'yyyy-mm-dd');
				this.coachForm.coachBirthday = coachBirthday;
				this.birthday.show = false;
			},
			//从业时间确认
			serviceYearsConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				var serviceYears = timeFormat(e.value, 'yyyy-mm-dd');
				this.coachForm.serviceYears = serviceYears;
				this.serviceYears.show = false;
			},
			//短信验证码发送
			getCode() {
				if(this.smsData.getCodeBtnDisabled){
					return ;
				}
				if(!this.coachForm.coachPhone){
					uni.$u.toast("请输入手机号码后获取")
					return ;
				}
				uni.showLoading({
					title: '发送中...',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/sms/send',
					type: 'POST',
					data: { phone: this.coachForm.coachPhone }
				}).then(res => {
					setTimeout(() => {
						if (res?.code === 200) {
							uni.$u.toast("短信发送成功");
							this.smsData.getCodeBtnDisabled = true;
							this.setTimer(); //调用定时器方法
						} else{
							uni.$u.toast(res.msg);
						}
					}, 2000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.smsData.getCodeText = "60s"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.smsData.getCodeBtnDisabled = false
						this.smsData.getCodeText = "获取"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.smsData.getCodeText = holdTime+"s"
					holdTime--;
				}, 1000)
			},
			// 按钮恢复原样
			getcodeDefault(){
				// 清除定时器
				clearInterval(this.Timer); 
				this.smsData.getCodeText = '获取'
				this.smsData.getCodeBtnDisabled = false
			},
			
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			},
			//提交注册申请
			formSubmitBtn(){
				
				if(this.coachImgList.length <= 0){
					uni.$u.toast("请上传您的相片")
					return ;
				}
				if(this.idFrontList.length <= 0){
					uni.$u.toast("请上传身份证正面图")
					return ;
				}
				if(this.idBackList.length <= 0){
					uni.$u.toast("请上传身份证发面图")
					return ;
				}
				
				if(!this.coachForm.coachName){
					uni.$u.toast("请输入您的姓名")
					return ;
				}
				if(!this.coachForm.coachPhone){
					uni.$u.toast("请输入手机号码")
					return ;
				}
				if(!this.coachForm.code){
					uni.$u.toast("请输入验证码")
					return ;
				}
				if(!this.coachForm.account){
					uni.$u.toast("请输入登录账号")
					return ;
				}
				if(!this.coachForm.password){
					uni.$u.toast("请输入登录密码")
					return ;
				}
				
				if(this.coachTagsChooseList.length <= 0){
					uni.$u.toast("请选择您的专业标签")
					return ;
				}
				
				
				if(!this.coachForm.serviceYears){
					uni.$u.toast("请选择从业时间")
					return ;
				}
				
				if(!this.coachForm.coachIntro){
					uni.$u.toast("请输入个人简历")
					return ;
				}
				
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认是否提交注册申请?',
					success: function(res) {
						if (res.confirm) {
							that.coachApply();
						}
					}
				});
				
			},
			//提交申请
			coachApply(){
				const params = this.coachForm;
				params.idFrontImg = this.idFrontList[0].url;
				params.idReverseImg = this.idBackList[0].url;
				params.coachImg = this.coachImgList[0].url;
				params.coachTags = this.coachTagsChooseList.join(',');
				
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/coach/apply',
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if (res?.code === 200) {
						
						uni.showModal({
						   title: '申请成功',
						   content: '请等待1-3个工作日审批，审批结果将以短信的形式通知您',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								   uni.navigateBack()
							   }
						   }
						});
						
					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
		
		.venueForm {
			padding: 40rpx;
			
			.form-row {
				border-radius: 8rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 200rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;padding-right: 20rpx;line-height: 90rpx;overflow: hidden;
				}
			
			}
			
			.height30 {
				height: 30rpx;
			}
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		
		.multiple {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 25rpx 0;
		
			view {
				width: 23%;
				margin-left: 2.666%;
				font-size: 26rpx;
				color: #2979ff;
				line-height: 68rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: #ecf5ff;
		
				&.active {
					position: relative;
		
					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border: 2rpx solid #2979ff;
						border-radius: 10rpx;
					}
				}
		
				&:nth-child(4n + 1) {
					margin-left: 0;
				}
		
				&:nth-child(n + 5) {
					margin-top: 12rpx;
				}
			}
		}
		
		.height30 {
			height: 30rpx;
		}
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		.required {
			color: red;
		}
</style>
